import React, { useEffect, useRef } from 'react'
import Child from './Child'

export default function UseRefDemo () {
  const inputRef = useRef()
  const childRef = useRef()

  useEffect(() => {
    // useEffect等初次完成之后渲染，相当于 componentDidMount
    inputRef.current.focus()
  }, [])

  const change = () => {
    console.log(childRef.current)
    childRef.current.setCount(200)
  }

  return (
    <div>
      UseRefDemo
      <p>
        <input type='text' ref={inputRef} />
      </p>
      <button onClick={change}>change</button>
      <hr />
      <Child ref={childRef} />
    </div>
  )
}
